<template style="height:100%">
  <div class="pharmacy">
    <van-icon name="wap-home-o" class="goods" @click="backToHome"
      ><span>&nbsp;健康好药馆</span></van-icon
    >

    <img src="../../assets/imgs/春日.PNG" />
    <div class="down">
      <h3>
        <van-icon name="diamond" color="#fff6af" size="25px" />&nbsp;过敏不惧
        春日无忧&nbsp;<van-icon name="diamond" color="#fff6af" size="25px" />
      </h3>
      <div class="text">
        <h4>什么是皮肤过敏:</h4>
        &emsp;皮肤过敏是身体在吸入或者接触过敏物质刺激后,皮肤所产生一系列症状(例如:眯痒、红肿、皮疹、水疱等)的总称。
        <h6>典型症状:丘疹、红斑、瘙痒、水泡、渗出等</h6>
        <h6>以下情况须及时于皮肤科就医咨询:</h6>
        (1)长期反复皮肤过敏,病程超过6周以上,常达数月或数年;<br />
        (2)怀疑与一些药物、食物、酒精、日光、冷风等接触史有关;<br />
        (3)皮肤频繁反复发作丘疱疹，有渗出倾向,眯痒明显,影响日常活动或睡眠;<br />
        (4)湿疹合井感染,出现化脓、黄色结痂或发热等;<br />
        (5)皮疹范围扩大,其它部位也出现类似皮疹;<br />(6)出现其它严重、持续或进展性症状体征。
      </div>

      <!-- 对应 -->
      <van-tabs  class="table">
        <van-tab title="湿疹">
          <h5>常见的皮肤过敏疾病:湿疹、特应性皮炎、芒果皮炎、药疹</h5>
          <table border="1" cellspacing="0">
            <tr>
              <td>诱发因素</td>
              <td>鸡蛋、牛奶、西红柿、芒果及某些药物等辛辣刺激性食物</td>
            </tr>
            <tr>
              <td>临床常用药物介绍</td>
              <td>
                糠酸莫米松乳膏——糖皮质激素,止痒,消除炎症<br />
                氯雷他定片——口服抗过敏药,适用于2<br />
                卤米松乳膏——糖皮质激素,止痒,消除炎症
              </td>
            </tr>
          </table>
        </van-tab>
        <van-tab title="荨麻疹">
          <h5>常见的皮肤过敏疾病:荨麻疹、多形性日光疹</h5>
          <table border="1" cellspacing="0">
            <tr>
              <td>诱发因素</td>
              <td>鸡风吹日晒，花粉柳絮等季节性因素</td>
            </tr>
            <tr>
              <td>临床常用药物介绍</td>
              <td>
                西替利嗪片——口服抗过敏药,适用于6岁及以上人群<br />
                地奈德乳膏——糖皮质激素,止痒,消除炎症
              </td>
            </tr>
          </table>
        </van-tab>
        <van-tab title="接触性皮炎">
          <h5>常见的皮肤过敏疾病:接触性皮炎、尿布疹、面部皮炎</h5>
          <table border="1" cellspacing="0">
            <tr>
              <td>诱发因素</td>
              <td>膏药、胶布、化妆品、尿不湿、卫生巾等</td>
            </tr>
            <tr>
              <td>临床常用药物介绍</td>
              <td>
                丁酸氢化可的松乳膏——糖皮质激素,止痒,消除炎症<br />
                依巴斯汀片——口服抗过敏药,适用于12岁及以上人群
              </td>
            </tr>
          </table>
        </van-tab>
      </van-tabs>

      <!-- 列表 -->
      <h3 class="title">30分钟送达 皮肤无虑</h3>
      <van-list class="list">
        <van-grid :column-num="2">
          <van-grid-item v-for="value in goods.slice(0,4)" :key="value" class="one">
            <template #icon>
              <img src="../../assets/imgs/药品3.PNG" />
            </template>
            <template #text>
              <div class="big">
                <h5>{{value.dec}}</h5>
                <span>月售99</span>
                <div>5.83折</div>
                <div class="fk">
                  <span>{{value.price}}</span>
                  <button>马上抢</button>
                </div>
              </div>
            </template>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </div>
</template>

<script lang='ts' setup>
const backToHome = () => {
  history.back();
};
import { ref,onMounted } from 'vue';
import { medal } from '../../api/userDoctor'
let goods = ref("");

onMounted(() => {
  const result: any = medal().then((res) => {
    console.log(res);
    goods.value=res.list
  })
});

</script>

<style lang='less' scoped>
.pharmacy {
  background-color: #ff8604;
  min-height: 100%;
  box-sizing: border-box;
  .goods {
    color: rgb(24, 24, 24);
    font-size: 18px;
    margin-top: 16px;
    span {
      color: azure;
    }
    margin-bottom: 10px;
    margin-left: 10px;;
  }
}

img {
  width: 100%;
  height: 180px;
}

.down {
  background-color: #ff8604;
  height: 100%;
  padding: 12px;

  h3 {
    color: aliceblue;
    text-align: center;
    margin-top: 0px;
  }

  .text {
    background-color: #fff1d6;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 20px;

    h4 {
      margin: 4px;
    }

    h6 {
      margin: 5px;
    }
  }

  .table {
    :deep(.van-tabs__nav) {
      background-color: #ff8604;
    }

    :deep(.van-tab--active) {
      color: rgb(255, 255, 255);
    }
  }

  .title {
    margin: 15px;
  }

  .list {
    :deep(.down .list .one[data-v-16ad0e9d]) {
      padding: 0;
    }

    .one {
      width: 100px;
      height: 200px;
      padding: 6px;

      img {
        width: 100%;
        height: 80px;
        padding: 0;
      }

      .big {
        h5 {
          margin: 2px;
        }

        span {
          color: rgb(203, 203, 188);
          font-size: 10px;
          margin-right: 70px;
        }
      }
    }

    button {
      float: right;
      background-color: #ff8604;
      color: aliceblue;
      border: #ff8604;
      border-radius: 12px;
      font-size: 10px;
    }
  }

  //    <div class="big">
  //                 <h5>描述</h5>
  //                 <span>月售99</span>
  //                 <div>5.83折</div>
  //                 <div class="fk">
  //                   <span>price</span>
  //                   <span>折price</span>
  //                   <button>马上抢</button>
}</style>
